<template>
  <div class="wrapper">
    <parallax class="section page-header header-filter" :style="headerStyle">
      <HeadLine style="z-index: 1;">
        <template slot="top">
          <div style="font-family: 'MyriadPro-Bold_0';"></div>
        </template>
        <template slot="centre">
          不只是工作 也可以是合作
          <!-- 联系我们 -->
        </template>
      </HeadLine>
    </parallax>
    <div class="main main-raised">
      <div class="section section-basic section-divider">
        <MainTitle>
          <template slot="mainTitle">
            CONTACT US
          </template>
          <template slot="mainInfo">
            联系我们
          </template>
        </MainTitle>
        <div class="content-flex">
          <div class="contact-info">
            <p class="dz">盛邦花园六区 3号楼1601</p>

            <p class="dh">
              xxx-xxxxxxxx(总机电话) xxxx-xxx-xxx(销售/服务热线电话)
            </p>

            <p class="yx">
              <a href="mailto:jinjiashuo@souvi.com">jinjiashuo@souvi.com</a>
              (服务邮箱)
            </p>

            <p class="cz">xxxxxxxxxx(前台传真)</p>

            <p class="yzbm">100095</p>
          </div>
          <div>
            <MainTitle>
              <template slot="mainTitle">
                <span style="font-size: 2rem;letter-spacing: 0;"
                  >盛邦花园六区</span
                >
              </template>
              <template slot="mainInfo">
                <!-- 联系我们 -->
              </template>
            </MainTitle>
            <img src="../assets/img/address.png" draggable="false" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeadLine from "./components/HeadLine.vue";
import MainTitle from "./components/MainTitle";
export default {
  components: {
    HeadLine,
    MainTitle
  },
  bodyClass: "profile-page",
  props: {
    header: {
      type: String,
      default: require("@/assets/img/zxns.jpg")
    }
  },
  computed: {
    headerStyle() {
      return {
        backgroundImage: `url(${this.header})`
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.content-flex {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;

  .contact-info {
    p {
      font-size: 1rem;
      font-weight: 400;
    }
    .dz::before {
      content: "地 址：";
      font-weight: 700;
      font-size: 1rem;
    }
    .dh::before {
      content: "电 话：";
      font-weight: 700;
      font-size: 1rem;
    }
    .yx::before {
      content: "邮 箱：";
      font-weight: 700;
      font-size: 1rem;
    }

    .cz::before {
      content: "传 真：";
      font-weight: 700;
      font-size: 1rem;
    }
    .yzbm::before {
      content: "邮政编码：";
      font-weight: 700;
      font-size: 1rem;
    }
  }
}
</style>
